<template>
  <div class="app-container">
    <div class="hospitalPayMent">
      <!-- 查询模块 -->
      <el-form :model="form" ref="form" label-width="130px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select filterable v-model="form.hospitalId" placeholder="请选择">
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行卡号">
              <el-input v-model="form.bankCard" placeholder="请输入银行卡号" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6" v-if="hasPermission('adminRole')">
            <el-form-item label="户名">
              <el-input v-model="form.paymentSn" placeholder="请输入户名"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="6" class="alignRight">
            <el-button type="primary" @click="bankCardAdd">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table :data="tableData" border style="width: 100%" ref="tableData">
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="hospitalName" label="医院" align="center"></el-table-column>
        <el-table-column prop="bankCard" label="银行卡号" align="center"></el-table-column>
        <el-table-column prop="bank" label="开户行" align="center"></el-table-column>
        <el-table-column prop="realname" label="户名" align="center"></el-table-column>
        <el-table-column prop="createAt" label="添加时间" align="center"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="page_sizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 分页 -->
  </div>
</template>
<script>
import accountManagement from "@/api/accountManagement";
import commonFn from "@/utils/common";
import { hospitalDropDown } from "@/api/doctorManage";
export default {
  name: "bankCardManagement",
  data() {
    return {
      tableLoading: true,
      officeOption: [],
      // form表单
      form: {
        bankCard: "",
        realname: "",
        hospitalId: null,
        pageNum: 1,
        pageSize: 10
      },
      dates: null,
      // 银行下拉选
      bankNameList: [],
      //   table列表数据
      tableData: [],
      currentPage: 1, //当前页数
      page_sizes: [10, 30, 50, 100], //每页显示个数
      page_totals: 60 //总条目数
    };
  },
  inject: ["reload"],
  mounted() {
    this.getList(this.form);
    this.hlist();
  },
  methods: {
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "",
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    //添加银行卡
    bankCardAdd() {
      this.form.pageNum = 1;
      this.getList(this.form);
    },
    // 获取列表
    getList(e) {
      accountManagement
        .getCardList(e)
        .then(res => {
          if (!res.data.code) {
            console.log(res);
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          // this.errorStatus(res.msg);
          this.tableLoading = false;
        });
    },

    // 导出
    // handleExport() {
    //   let datas = { ...this.form };
    //   delete datas.pageSize;
    //   hospitalPay
    //     .handleExport(datas)
    //     .then(res => {
    //       // console.log(res);
    //       commonFn.downFile("银行卡", res);
    //     })
    //     .catch(err => {
    //       // this.errorStatus(res.msg);
    //     });
    // },
    // 删除
    handleDelete(e) {
      let defineFn = () => {
        let datas = { id: e, hospitalId: this.form.hospitalId };
        console.log(datas);
        accountManagement
          .delete(datas)
          .then(res => {
            if (!res.data.code) {
              this.reload();
              this.succStatus("删除成功");
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(err => {
            this.errorStatus(res.msg);
          });
      };
      let confirmDatas = {
        desc: "此操作将会删除该数据, 是否继续?",
        title: "提示",
        confirmBtnTxt: "确定",
        cancelBtnTxt: "取消",
        fn: defineFn,
        catchInfo: "已取消删除"
      };
      this.eleConfirm(confirmDatas);
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },
    // 路由跳转
    toRoutes(e, userId) {
      if (userId == 1) {
        let route = { name: e };
        this.$router.push(route);
      } else {
        let route = {
          name: e,
          query: { userId: JSON.stringify(userId) }
        };
        this.$router.push(route);
      }
    },
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    //confirm框
    eleConfirm(e) {
      this.$confirm(e.desc, e.title, {
        confirmButtonText: e.confirmBtnTxt,
        cancelButtonText: e.cancelBtnTxt,
        type: "warning"
      })
        .then(() => {
          e.fn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: e.catchInfo
          });
        });
    },
    //成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    }
  }
};
</script>
<style scoped>
/* 分页样式 */
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.el-col-24 {
  margin-bottom: 20px;
}
</style>